
<div id="deviceTimers" class="container js-device-timers">
<div ng-show="!vm.ismobile">
	<table class="bannav" id="bannav" border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>
				<a class="btnstylerev" back-button>{{ ::'Back' | translate }}</a>
			</td>
		</tr>
	</table>
	<br>

	<h2 class="page-header">{{ ::'Name'|translate }}: {{::vm.itemName}}</h2>

	<timesun></timesun>
</div>
<div ng-show="vm.ismobile">
	<div  class="bannav" id="bannav" border="0" cellpadding="0" cellspacing="0" width="100%">
		<a class="btnstylerev" back-button>{{ ::'Back' | translate }}</a>
		<h2 class="page-header">{{ ::'Name'|translate }}: {{::vm.itemName}}</h2>
	</div>
</div>
	<div id="tabs">
		<ul id="GridTable" class="nav nav-tabs sub-tabs" data-tabs="GridTable">
			<li class="active"><a data-target="#dz-timers-table" data-toggle="tab" data-i18n="Table">Table</a></li>
			<li>               <a data-target="#ts-planning"     data-toggle="tab" data-i18n="Grid">Grid</a></li>

		</ul>
		<div id="my-tab-content" class="tab-content">
			<div id="ts-planning" class="ts-planning tab-pane"></div>
			<div id="dz-timers-table" class="tab-pane active">
				<timers-table ng-if="::vm.isLoaded"
							  timer-settings="vm.timerSettings"
							  timers="vm.timers"
							  selected-timer-idx="vm.selectedTimerIdx"
							  level-options="::vm.levelOptions"
							  is-Blind="::vm.isBlind"
							  is-setpoint-timers="::vm.isSetpointTimers">
				</timers-table>

				<table id="updelclr" border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td>
							<button id="timerupdate"
									class="btnstyle3"
									ng-click="vm.updateTimer(vm.selectedTimerIdx)"
									ng-disabled="!vm.selectedTimerIdx">
								{{:: 'Update' | translate }}
							</button>
							&nbsp;&nbsp;
							<button id="timerdelete"
									class="btnstyle3"
									ng-click="vm.deleteTimer(vm.selectedTimerIdx)"
									ng-disabled="!vm.selectedTimerIdx">
								{{:: 'Delete' | translate }}
							</button>
						</td>
						<td align="right">
							<button class="btnstyle3" ng-click="vm.clearTimers()">{{:: 'Clear' | translate }}</button>
						</td>
					</tr>
				</table>
				<br>

				<timer-form ng-if="::vm.isLoaded"
							timer-settings="vm.timerSettings"
							level-options="::vm.levelOptions"
							is-Blind="::vm.isBlind"
							color-settings-type="::vm.colorSettingsType"
							is-command-selection-disabled="::vm.isCommandSelectionDisabled"
							is-setpoint-timers="::vm.isSetpointTimers">
				</timer-form>

				<br>
				<button class="btnstyle3" ng-click="vm.addTimer()">{{:: 'Add' | translate }}</button>
			</div>
		</div>

		<script type="text/ng-template" id="views/timers/timersTable.html">
			<table class="display" border="0" cellpadding="0" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th width="40" align="center"></th>
						<th width="150" align="center"></th>
						<th width="80" align="center"></th>
						<th width="60" align="center"></th>
						<th width="60" align="center"></th>
						<th width="60" align="center"></th>
						<th width="140" align="center"></th>
						<th align="left"></th>
					</tr>
				</thead>
			</table>
		</script>

		<script type="text/ng-template" id="views/timers/timerForm.html">
			<table class="display settings-form" id="timerparamstable">
				<tr>
					<td>
						<label for="enabled">{{:: 'Enabled' | translate }}:</label>
					</td>
					<td>
						<input type="checkbox" id="enabled" ng-model="vm.timerSettings.active">
						<label for="enabled"></label>
					</td>
				</tr>
				<tr>
					<td>
						<label for="combotype">{{:: 'Type' | translate }}:</label>
					</td>
					<td>
						<select id="combotype"
								style="width:180px"
								class="combobox ui-corner-all"
								ng-model="vm.timerSettings.timertype"
								ng-options="item.value as item.label for item in ::vm.typeOptions">
						</select>
					</td>
				</tr>
				<tr ng-show="vm.isDateVisible()">
					<td>
						<label for="sdate">{{:: 'Date' | translate }}:</label>
					</td>
					<td>
						<input id="sdate"
							   type="text"
							   style="width: 100px; padding: .2em;"
							   class="text ui-widget-content ui-corner-all"
							   autocomplete="off"
							   ng-model="vm.timerSettings.date">
					</td>
				</tr>
				<tr>
					<td>
						<label for="combotimehour">{{:: 'Time' | translate }}:</label>
					</td>
					<td>
						<select id="combotimehour" style="width:50px" class="combobox ui-corner-all"
								ng-model="vm.timerSettings.hour"
								ng-options="item.value as item.label for item in ::vm.hourOptions">
						</select>
						:
						<select id="combotimemin" style="width:50px" class="combobox ui-corner-all"
								ng-model="vm.timerSettings.min"
								ng-options="item.value as item.label for item in ::vm.minuteOptions">
						</select>

						<span>{{:: '(hour/minute)' | translate }}</span>
					</td>
				</tr>
				<tr ng-hide="::vm.isSetpointTimers">
					<td>
						<label for="randomness">{{:: 'Randomness' | translate }}:</label>
					</td>
					<td>
						<input id="randomness" type="checkbox" ng-model="vm.timerSettings.randomness">
						<label for="randomness"></label>
					</td>
				</tr>
				<tr>
					<td>
						<label for="persistent">{{:: 'Persistent' | translate }}:</label>
					</td>
					<td>
						<input id="persistent" type="checkbox" ng-model="vm.timerSettings.persistent">
						<label for="persistent"></label>
					</td>
				</tr>
				<tr ng-hide="::vm.isSetpointTimers || vm.isCommandSelectionDisabled">
					<td>
						<label for="combocommand">{{:: 'Command' | translate }}:</label>
					</td>
					<td ng-hide="::vm.isBlind">
						<select id="combocommand"
								class="combobox ui-corner-all"
								style="width:90px"
								ng-disabled="vm.isCommandSelectionDisabled" ng-model="vm.timerSettings.command"
								ng-options="item.value as item.label for item in ::vm.commandOptions">
						</select>
					</td>
					<td ng-show="::vm.isBlind">
						<select id="combocommand"
								class="combobox ui-corner-all"
								style="width:90px"
								ng-disabled="vm.isCommandSelectionDisabled" ng-model="vm.timerSettings.command"
								ng-options="item.value as item.label for item in ::vm.blindOptions">
						</select>
					</td>
				</tr>
				<tr ng-show="::vm.isSetpointTimers">
					<td>
						<label for="tvalue">{{:: 'Value' | translate }}:</label>
					</td>
					<td>
						<input type="text" id="tvalue" style="width: 60px; padding: .2em;"
							   class="text ui-widget-content ui-corner-all"
							   ng-model="vm.timerSettings.tvalue">&nbsp;
							   <label for="tvalue">{{vm.timerSettings.vunit}}</label>
							   
					</td>
				</tr>

				<tr ng-show="vm.isLevelVisible()">
					<td>
						<label for="combolevel">
							<span ng-show="::!vm.isSelector">{{:: 'Level' | translate }}</span>
							<span ng-show="::vm.isSelector">{{:: 'Level name' | translate }}</span>:
						</label>
					</td>
					<td>
						<select id="combolevel" style="min-width:70px" class="combobox ui-corner-all"
								ng-model="vm.timerSettings.level"
								ng-options="item.value as item.label for item in vm.levelOptions">
						</select>
					</td>
				</tr>

				<tr ng-if="::vm.isColorSettingsAvailable">
					<td>
						<label>{{:: 'Color' | translate }}:</label>
					</td>
					<td>
						<rgbw-picker color="vm.timerSettings.color"
									 level="vm.timerSettings.level"
									 color-settings-type="vm.colorSettingsType"
									 dimmer-type="vm.dimmerType"
									 max-dimmer-level="100"></rgbw-picker>
					</td>
				</tr>

				<tr ng-show="vm.isDayScheduleVisible()">
					<td></td>
				</tr>

				<tr ng-show="vm.isDayScheduleVisible()">
					<td>
						<label>{{:: 'When' | translate }}:</label>
					</td>
					<td>
						<input id="when_1" type="radio" name="when" value="Everyday" ng-model="vm.week.type">&nbsp;
						<label for="when_1">{{:: 'Everyday' | translate }}</label>
						<br>
						<br>
						<input id="when_2" type="radio" name="when" value="Weekdays" ng-model="vm.week.type">&nbsp;
						<label for="when_2">{{:: 'Weekdays' | translate }}</label>
						<br>
						<br>
						<input id="when_3" type="radio" name="when" value="Weekends" ng-model="vm.week.type">&nbsp;
						<label for="when_3">{{:: 'Weekends' | translate }}</label>
						<br>
						<br>
						<input id="when_4" type="radio" name="when" value="SelectedDays" ng-model="vm.week.type">&nbsp;
						<label for="when_4">{{:: 'Selected Days' | translate }}</label>
						<br>
						<br>
					</td>
				</tr>
				<tr ng-show="vm.isDayScheduleVisible()">
					<td></td>
				</tr>
				<tr ng-show="vm.isDayScheduleVisible()">
					<td>
						<label>{{:: 'Days' | translate }}:</label>
					</td>
					<td>
						<input type="checkbox" id="ChkMon"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.mon">&nbsp;
						<label for="ChkMon">{{:: 'Monday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkTue"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.tue">&nbsp;
						<label for="ChkTue">{{:: 'Tuesday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkWed"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.wed">&nbsp;
						<label for="ChkWed">{{:: 'Wednesday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkThu"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.thu">&nbsp;
						<label for="ChkThu">{{:: 'Thursday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkFri"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.fri">&nbsp;
						<label for="ChkFri">{{:: 'Friday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkSat"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.sat">&nbsp;
						<label for="ChkSat">{{:: 'Saturday' | translate }}</label>
						<br>
						<input type="checkbox" id="ChkSun"
							   ng-disabled="!vm.isDaySelectonAvailable()"
							   ng-model="vm.week.days.sun">&nbsp;
						<label for="ChkSun">{{:: 'Sunday' | translate }}</label>
					</td>
				</tr>
				<tr ng-show="vm.isRDaysVisible()">
					<td></td>
				</tr>
				<tr ng-show="vm.isRDaysVisible()">
					<td>
						<label for="days">{{:: 'Day' | translate }}:</label>
					</td>
					<td>
						<select id="days"
								class="combobox ui-corner-all"
								style="width:50px"
								ng-model="vm.timerSettings.mday"
								ng-options="item.value as item.label for item in ::vm.dayOptions">
						</select>
					</td>
				</tr>
				<tr ng-show="vm.isROccurenceVisible()">
					<td></td>
				</tr>
				<tr ng-show="vm.isROccurenceVisible()">
					<td>
						<label for="occurence">{{:: 'Day' | translate }}:</label>
					</td>
					<td>
						<select id="occurence"
								class="combobox ui-corner-all"
								style="width:90px"
								ng-model="vm.timerSettings.occurence"
								ng-options="item.value as item.label for item in ::vm.occurenceOptions">
						</select>

						<select id="weekdays"
								class="combobox ui-corner-all"
								style="width:100px"
								ng-model="vm.timerSettings.weekday"
								ng-options="item.value as item.label for item in ::vm.weekdayOptions">
						</select>
					</td>
				</tr>
				<tr ng-show="vm.isRMonthsVisible()">
					<td></td>
				</tr>
				<tr ng-show="vm.isRMonthsVisible()">
					<td>
						<label for="months">{{:: 'Month' | translate }}:</label>
					</td>
					<td>
						<select id="months"
								class="combobox ui-corner-all"
								style="width:90px"
								ng-model="vm.timerSettings.month"
								ng-options="item.value as item.label for item in ::vm.monthOptions">
						</select>
					</td>
				</tr>
			</table>
		</script>
	</div>
</div>
